<template>
  <div class="file_card_box">
    <div
      class="file_card"
      v-for="(item, index) in $store.state.file.folderList"
      :key="index"
      @click="aa(item)"
    >
      <div class="card">
        <!--        <div-->
        <!--          class="card_action_btn card_action_left"-->
        <!--        >-->
        <!--          <input type="checkbox"/>-->
        <!--        </div>-->
        <div
          class="card_action_btn card_action_right"
          @click.stop="handlerMenu(index)"
        >
          <span class="card_action_list">···</span>
        </div>
        <div class="context_click_menu" v-if="showFileMenu === index">
          <ul class="context_dropdown_menu">
            <li
                class="context_dropdown_menu_item"
                v-if="item.type !== 'folder'" @click.stop="kuaichuan(item)"
            >
              <div class="context_dropdown_menu_item_text">快传</div>
            </li>
            <li
              class="context_dropdown_menu_item"
              @click.stop="downloadopen(item)"
            >
              <div class="context_dropdown_menu_item_text">下载</div>
            </li>
            <li
              class="context_dropdown_menu_item"
              v-if="item.type !== 'folder'" @click.stop="collectby(item)"
            >
              <div class="context_dropdown_menu_item_text">收藏</div>
            </li>
            <li
              style="
                background-color: rgb(132, 133, 141, 0.08);
                height: 1px;
                margin: 4px 8px;
              "
            ></li>
            <li class="context_dropdown_menu_item" @click.stop="open(item)">
              <div class="context_dropdown_menu_item_text">重命名</div>
            </li>
            <li class="context_dropdown_menu_item" @click.stop="remove(item)">
              <div class="context_dropdown_menu_item_text">移动</div>
            </li>
            <li
              class="context_dropdown_menu_item"
              v-if="item.type !== 'folder'" @click.stop="removetolock(item)"
            >
              <div class="context_dropdown_menu_item_text">移至密码箱</div>
            </li>
            <li
              class="context_dropdown_menu_item"
              @click.stop="removetobfp(item)"
            >
              <div class="context_dropdown_menu_item_text">移至资源库</div>
            </li>
            <li
              class="context_dropdown_menu_item"
              v-if="item.type !== 'folder'"
              @click.s.stop="xx(item)"
            >
              <div class="context_dropdown_menu_item_text">查看详细信息</div>
            </li>
            <li
              style="
                background-color: rgb(132, 133, 141, 0.08);
                height: 1px;
                margin: 4px 8px;
              "
            ></li>
            <li
              class="context_dropdown_menu_item warn"
              @click.stop="removetohsz(item)"
            >
              <div class="context_dropdown_menu_item_text warn1">
                放入回收站
              </div>
            </li>
          </ul>
        </div>
        <div
          class="node_card"
          @mouseover="showButtons = true"
          @mouseout="showButtons = false"
        >
          <div class="folder_cover">
            <img
              v-if="item.type === 'jpg' || item.type === 'png'"
              style="width: 115px; height: 90px"
              :src="item.fileUrl"
              alt=""
            />
            <img
              v-else
              style="width: 115px; height: 90px"
              :src="typeList[item.type]"
              alt=""
            />
          </div>
          <div class="card_text">
            <p class="card_title">{{ item.name }}</p>
            <p class="card_time">{{ item.createDate }}</p>
          </div>
        </div>
      </div>
    </div>

    <div>
      <el-dialog
        title="预览"
        :visible.sync="dialogVisible"
        width="90%"
        top="5vh"
      >
        <div class="el-dialog-div">
          <iframe
            :src="this.viewUrl"
            style="width: 100%; height: 100%"
          ></iframe>
        </div>
      </el-dialog>
    </div>

    <!--   重命名弹窗 -->
    <el-dialog title="重命名" :visible.sync="renameDialog" width="30%">
      <el-input
        :value="form.name"
        @input="inputChange($event, item)"
      ></el-input>
      <input type="hidden" v-model="form.id" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="renameDialog = false">取 消</el-button>
        <!-- 修改dialogVisible为renameDialog -->
        <el-button type="primary" @click="rename(form.id, form.name)"
          >确 定</el-button
        >
        <!-- 修改dialogVisible为renameDialog -->
      </span>
    </el-dialog>
    <!--    移动文件夹 弹窗-->
    <el-dialog :title="this.title" :visible.sync="removeFlag" width="30%">
      <el-tree
        :data="folderList"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="removeFlag = false">取 消</el-button>
        <el-button type="primary" @click="removeBy">确 定</el-button>
      </span>
    </el-dialog>
    <!--   详细信息 -->
    <el-dialog :title="this.title" :visible.sync="xxflag" width="50%">
      <el-descriptions title="详细信息" :column="2">
        <el-descriptions-item label="文件名">
          <el-tag size="small">{{ xxinfo.name }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          <el-tag size="small">{{ xxinfo.createDate }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="修改时间">
          <el-tag size="small" v-if="xxinfo.updateTime">{{
            xxinfo.updateTime
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="文件大小">
          <el-tag size="small">{{ xxinfo.size }} KB</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!--    下载-->
    <el-dialog title="下载" :visible.sync="downflog" width="30%">
      <span style="color: red">必须是盘符中存在的路径</span>
      <span></span>
      <el-input
        style="margin-top: 10px"
        v-model="downloadp"
        placeholder="请输入内容"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="downflog = false">取 消</el-button>
        <el-button type="primary" @click="ddd()">确 定</el-button>
      </span>
    </el-dialog>
<!--    快传-->
    <el-dialog title="快传" :visible.sync="qrflag" width="20%">
<!--      <span style="color: red">必须是盘符中存在的路径</span>-->
      <span>使用手机浏览器扫描下载文件</span>
      <img :src="qr" :alt="qr"/>
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="downflog = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="ddd()">确 定</el-button>-->
<!--      </span>-->
    </el-dialog>
  </div>
</template>

<script>
import {
  getFolder,
  getTree,
  getView,
  removeFolder,
  updateFolder,
  download,
  downloadOne,
  removeFolderTobfp,
  removeFolderTohsz,
  collect,
  removetolocks, kc
} from "@/api/file";
import { typeList } from "./icon.js";
import { mapMutations } from "vuex";

export default {
  name: "FileCardList",
  data() {
    return {
      qr: "",
      qrflag: false,
      item: null,
      showButtons: false,
      showFileMenu: undefined,
      showMenuF: false,
      FolderList: [],
      imageUrl: "",
      dialogVisible: false,
      renameDialog: false,
      form: {},
      viewUrl: "",
      typeList,
      /** 移动相关**/
      removeFlag: false,
      title: "",
      folderList: [],
      defaultProps: {
        children: "childer",
        label: "name",
      },
      beforeId: null,
      afterId: null,
      xxflag: false,
      xxinfo: {},
      downflog: false,
      downloadp: "D:/doc/clouddisk",
      downloadid: null,
      downloadFileUrl: null,
      dtype: null,
    };
  },
  props: ["showMenu"],
  created() {
    this.showMenuF = this.showMenu;
    this.getFolderList();
  },
  computed: {
    getBreadCrumbs() {
      let breadCrumbs = this.$store.getters.getBreadCrumbs;
      return breadCrumbs.pop();
    },
  },
  methods: {
    ...mapMutations("file", [
      "pushBreadCrumps",
      "pushFolderList",
      "deleteFolderList",
    ]),
    kuaichuan(item){
      kc(item.id).then(response => {
        // console.log(response.msg)
        // this.qr = response.data
        this.qr = 'data:image/png;base64,' + response.msg
        this.qrflag = true;
      })
    },
    aa(item) {
      // this.SET_CESHI(2); // 使用 SET_CESHI mutation
      // console.log(this.$store.state.file.ceshi); // 获取 state 中的 ceshi

      const { id, name, hasChildren, type } = item;
      if (type === "folder") {
        this.pushBreadCrumps({ id, name });
        // this.FolderList = this.$store.state.file.folderList

        getFolder(id).then((res) => {
          let data = [];
          this.deleteFolderList(data);
          for (let item of res.data) {
            this.pushFolderList(item);
          }
          this.FolderList = this.$store.state.file.folderList;
        });
      } else {
        console.log(id);
        getView(id).then((res) => {
          // 打开弹窗
          this.dialogVisible = true;
          console.log("预览", res);
          this.viewUrl = res.data.viewUrl;
        });
      }
    },
    // 详细信息
    xx(item) {
      this.xxflag = true;
      // console.log(item);
      this.xxinfo = item;
      // console.log(xxinfo.name)
    },
    removetolock(item){
      removetolocks(item).then(res => {
        if (res.code === 200){
          this.$message.success("移动成功")
        }
      })
    },
    // 移动至资源库
    removetobfp(item) {
      removeFolderTobfp(item.id).then((res) => {
        if (res.code === 200) {
          this.$message.success("移动成功");
          this.getFolderListi();
        }
      });
    },
    // 移动至回收站
    removetohsz(item) {
      removeFolderTohsz(item.id).then((res) => {
        if (res.code === 200) {
          this.$message.success("移动成功");
        }
      });
    },
    collectby(item){
      collect(item).then(res => {
        if (res.code === 200){
          this.$message.success("收藏成功")
        }
      })
    },
    // 下载
    downloadopen(item) {
      this.downflog = true;
      this.downloadid = item.id;
      this.downloadFileUrl = item.fileUrl;
      this.dtype = item.type;
    },
    ddd() {
      if (this.dtype === "folder") {
        this.download();
      } else {
        this.doenloadOne();
      }
    },
    download() {
      console.log(this.downloadid, this.downloadp);
      download(this.downloadp, this.downloadid).then((res) => {
        if (res.code === 200) {
          this.$message.success("下载成功");
          this.downflog = false;
        }
      });
    },
    doenloadOne() {
      downloadOne(this.downloadp, this.downloadFileUrl).then((res) => {
        if (res.code === 200) {
          this.$message.success("下载成功");
          this.downflog = false;
        }
      });
    },
    // 备份盘内移动文件夹
    remove(item) {
      this.getFolderListi(0);
      this.removeFlag = true;
      this.title = "移动文件夹";
      this.beforeId = item.id;
    },
    getFolderListi() {
      getTree().then((res) => {
        console.log(res.data);
        this.folderList = res.data;
      });
    },
    handleNodeClick(data) {
      // console.log("移动前id",this.beforeId,"移动后id",data.id)
      this.afterId = data.id;
    },
    removeBy() {
      console.log(this.beforeId, this.afterId);
      removeFolder(this.beforeId, this.afterId).then((res) => {
        if (res.code === 200) {
          this.$message.success("移动成功");
        }
      });
      // this.refresh(this.$store.getters.getBreadCrumbs.length - 1)
      this.removeFlag = false;
    },

    // getChildrens(tree, treeNode, resolve) {
    //   dict.dictList(tree.id).then((response) => {
    //     resolve(response.data);
    //   });
    // },
    // 重命名
    open(item) {
      this.renameDialog = true;
      this.form = item;
    },
    inputChange(e) {
      console.log("a:", e);
      this.$set(this.form, "name", e);
      this.form.name = e;
      // this.form.name = this.form
    },
    rename(id, name) {
      console.log(id, name);
      updateFolder({ id: id, name: name }).then((res) => {
        if (res.code === 200) {
          this.$message.success("修改成功");
          getFolder(this.$store.getters.getBreadCrumbs.length - 1).then(
            (res) => {
              let data = [];
              this.deleteFolderList(data);
              for (let item of res.data) {
                this.pushFolderList(item);
              }
            }
          );
        }
      });
      this.renameDialog = false;
    },
    /**
     * 获取备份盘集合
     */
    getFolderList() {
      getFolder(0).then((res) => {
        console.log(res);
        let data = [];
        this.deleteFolderList(data);
        // console.log(this.FolderList)
        console.log("长度", this.$store.state.file.breadCrumbs.length);
        if (this.$store.state.file.breadCrumbs.length === 0) {
          this.pushBreadCrumps({ id: 0, name: "备份盘" });
        }
        for (let item of res.data) {
          this.pushFolderList(item);
        }
        console.log(": ", this.$store.state.file.folderList);
        // 将文件列标存入状态中
        this.FolderList = this.$store.state.file.folderList;
      });
    },

    handlerMenu(index) {
      console.log("-----------handlerMenu-----------", index);
      this.showFileMenu = index;
    },
    // 点击空白处隐藏菜单
    handleRootClick() {
      this.showFileMenu = undefined;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {
          ``;
        });
    },
  },
  watch: {},
  mounted() {
    // 获取根元素的DOM节点
    const rootElement = document.querySelector(".app-wrapper");

    // 添加click事件监听器
    rootElement.addEventListener("click", this.handleRootClick);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器，以避免内存泄漏
    const rootElement = document.querySelector(".app-wrapper");
    rootElement.removeEventListener("click", this.handleRootClick);
  },
};
</script>

<style lang="scss" scoped>
.el-dialog-div {
  //margin-top: 10px;
  height: 75vh; //如果高度过高，可用max-height
  overflow: auto;
}

.file_card_box {
  display: flex;
  flex-wrap: wrap;

  .file_card {
    width: 155px;
    height: 207px;
    display: flex;
    justify-content: center;

    .card {
      width: 123px;
      position: relative;

      .node_card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 10px;
        padding: 8px 0 10px;

        &:hover {
          background-color: rgb(132, 133, 141, 0.08);
        }

        .folder_cover {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 12px;
        }

        .card_text {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          p {
            width: 100%;
            text-align: center;
          }

          .card_title {
            font-size: 14px;
            color: rgb(37, 38, 43);
            line-height: 1.5;
            margin: 0;
            margin-bottom: 2px;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .card_time {
            font-size: 12px;
            color: rgb(37, 38, 43, 0.36);
            margin: 0;
          }
        }
      }

      .card_action_btn {
        width: 24px;
        height: 24px;
        border-radius: 3px;
        background-color: #fff;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

        .card_action_list {
          font-weight: 500;
          line-height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgb(37, 38, 43, 0.36);
        }

        //&:hover {
        //  color: rgba(10, 10, 10);
        //}
      }

      .card_action_btn.hidden {
        display: none;
      }

      .card_action_left {
        position: absolute;
        top: 4px;
        left: 4px;
        z-index: 2;
      }

      .context_click_menu {
        width: 160px;
        padding: 4px;
        background-color: #fff;
        position: absolute;
        top: 34px;
        left: 96px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 100;

        .context_dropdown_menu {
          width: 152px;
          list-style: none;
          padding: 0;
          margin: 0;

          .context_dropdown_menu_item {
            display: flex;
            height: 36px;
            align-items: center;
            border-radius: 5px;
            width: 100%;

            .context_dropdown_menu_item_text {
              color: rgb(37, 38, 43);
              font-size: 14px;
              padding: 0 8px;
              font-family: Helvetica Neue, Helvetica, PingFang SC,
                Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
            }

            .context_dropdown_menu_item_text.warn1 {
              color: rgb(255, 111, 102);
            }
          }

          .context_dropdown_menu_item:hover {
            background-color: rgb(132, 133, 141, 0.08);
          }

          .context_dropdown_menu_item.warn:hover {
            background-color: rgb(243, 91, 81, 0.12);
          }
        }
      }

      .card_action_right {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 2;
      }

      .node_card.active {
        background-color: rgb(132, 133, 141, 0.08);
      }
    }
  }
}
</style>
